import React,{Component} from 'react';
import {connect} from 'react-redux'
import { Table, Button ,Breadcrumb, BreadcrumbItem , Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import  {increase2,setzero,deletePro,changeQ}  from '../actions'

const mapStateToProps = (state)=>{ 
    return {
        carts:state.cart,
        totalPrice:state.detailpro.totalPrice
    }
}

class Cart extends Component{
    componentWillMount(){
        this.props.setzero()
    }
    constructor(props) {
        super(props);
        this.state = {
            modal: false
        };
    
        this.toggle = this.toggle.bind(this);
    }  
    toggle() {
        this.setState({
            modal: !this.state.modal
        });
    }
    handleClick=(event,item)=>{
        var checkbox=event.target;
        if(checkbox.checked){
            this.props.increase2(item.quantity*item.price)
        }else{
            this.props.increase2(-item.quantity*item.price)
        }
    }
    handleChange=(index)=>{
        this.setState({value: event.target.value});
        this.props.changeQ(index,event.target.value)
    }
    showCarts = ()=>{
        var jsx = [];
        this.props.carts.map((item,index)=>{
            jsx.push(
                <tr key={index} >
                    <td style={{paddingLeft:"35px",width:"125px"}}>
                        <input type="checkbox" onClick={()=>this.handleClick(event,item)} aria-label="..." id="cartCheck" />
                    </td>
                    <td scope="row" style={{width:"150px"}}>{index+1}</td>
                    <td>{item.name}</td>
                    <td><input type="text" id="num" defaultValue={item.quantity} onChange={()=>this.handleChange(index)} style={{width:"50px"}}/></td>
                    <td>￥{item.price}</td>
                    <td style={{width:"200px"}}>￥{item.quantity*item.price}</td>
                    <td onClick={()=>{this.props.deletePro(index)}} style={{cursor:"pointer"}}><a>删除</a></td>
                </tr>
            );
        });
        return jsx;
    }
    sumup=()=>{
        var jsx = [];
        this.props.carts.map((item,index)=>{
            jsx.push(
                <tr key={index}>
                    <td scope="row">{index+1}</td>
                    <td>{item.name}</td>
                    <td>{item.quantity}</td>
                    <td>￥{item.price}</td>
                    <td>￥{item.quantity*item.price}</td>
                </tr>
            );
        });
        return jsx;
    }
    render(){
        return (
            <div style={{fontSize:"1.5rem"}}>
                <Breadcrumb>
                    <BreadcrumbItem active><b>Cart</b></BreadcrumbItem>
                </Breadcrumb>
                <Table id="table">
                    <thead>
                        <tr>
                            <th></th> 
                            <th></th>
                            <th>商品名称</th>
                            <th>商品数量</th>
                            <th>商品单价</th>
                            <th>商品小计</th>
                        </tr>
                    </thead>
                    <tbody style={{height:"500px"}}>
                        {this.showCarts()}
                    </tbody>
                </Table>
                <div style={{width:"100%",textAlign:"right",padding:"36px 172px 20px 0"}}>
                    <div style={{fontSize:"1.5rem"}}>
                        <h3 style={{color:"#f40"}}>商品总价：￥ 
                            <b style={{display:"inline-block",width:"30px"}}>{this.props.totalPrice}</b>
                        </h3> 
                        {/* <h4 onClick={()=>this.Total()}>总计：￥ </h4>*/}
                        <button type="button" className="btn btn-danger" data-toggle="modal" data-target="#exampleModal">结算</button>
                    </div>   
                </div>
                <div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div className="modal-dialog" role="document">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h4 className="modal-title" id="exampleModalLabel" style={{float:"left"}}>确认购买商品</h4>
                                <button type="button" className="close" data-dismiss="modal" aria-label="Close"  style={{float:"right"}}>
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div className="modal-body">
                                <Table >
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>商品名称</th>
                                            <th>商品数量</th>
                                            <th>商品单价</th>
                                            <th>商品小计</th>
                                        </tr>
                                    </thead>
                                    <tbody style={{height:"500px"}}>
                                        {this.sumup()}
                                    </tbody>
                                </Table>
                                <div style={{textAlign:"right",marginRight:"50px",color:"#f40"}}>商品总价：￥{this.props.totalPrice}</div>
                            </div>
                            <div className="modal-footer" style={{paddingRight:"50px"}}>
                                <button type="button" className="btn btn-danger" data-dismiss="modal">确认</button>
                            </div>
                        </div>
                    </div>
                </div>   
            </div>
        )
   }
}
export default connect(mapStateToProps,{increase2 , setzero , deletePro , changeQ})(Cart)
